<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>富豪榜</title>
    <link rel="stylesheet" href="index.css" />
  </head>

  <body>
    <!-- 导航栏 -->
    <nav>
      <ul>
        <li>主页</li>
        <li>排行榜</li>
        <li>联系方式</li>
      </ul>
    </nav>
    <!-- 头部内容 -->
    <header>
      <!-- 导航栏的按钮 -->
      <button id="toggle">导航栏</button>
      <!-- 标题 -->
      <h2>欢迎来到富豪排行榜</h2>
      <!-- 欢迎语句 -->
      <p>weclome to the rich rank</p>
    </header>
    <!-- 主题内容 -->
    <div class="container">
      <!-- 左盒子 -->
      <aside>
        <!-- 五个按钮 -->
        <button id="add-user">添加账户</button>
        <button id="double">资金翻倍</button>
        <button id="show-millionaire">查询百万富翁</button>
        <button id="sort">财富榜</button>
        <button id="calculate">计算总额</button>
      </aside>
      <!-- 右盒子 -->
      <main id="main">
        <h2>
          <strong>Person</strong>
          <span>Wealth</span>
        </h2>
      </main>
    </div>

    <script>
      let dataInfo = [
        {
          name: "安东尼 戴维斯",
          money: 892001,
        },
        {
          name: "凯里 欧文",
          money: 668932,
        },
        {
          name: "史蒂夫 库里",
          money: 698756,
        },
        {
          name: "德里克 罗斯",
          money: 492489,
        },
        {
          name: "保罗 乔治",
          money: 853957,
        },
        {
          name: "勒布朗 詹姆斯",
          money: 968472,
        },
        {
          name: "詹姆斯 哈登",
          money: 718225,
        },
        {
          name: "凯文 杜兰特",
          money: 889147,
        },
      ];

      //获取按钮
      let addUser = document.getElementById("add-user");
      let double = document.getElementById("double");
      let showMillionaire = document.getElementById("show-millionaire");
      let sort = document.getElementById("sort");
      let calculate = document.getElementById("calculate");
      let toggle = document.getElementById("toggle");
      let body = document.querySelector("body");
      let main = document.querySelector("#main"); //获取内容标签
      let index = 0; //模拟下标
      let dollar = "$"; //美元符号

      //导航栏
      toggle.addEventListener("click", function () {
        body.classList.toggle("show_nav");
      });

      //添加账户
      addUser.addEventListener("click", function () {
        //创建新节点
        let newH2 = document.createElement("h2");
        let newStrong = document.createElement("strong");
        let newSpan = document.createElement("span");
        //把新节点插入dom结构中
        if (index < dataInfo.length) {
          newStrong.innerHTML = `${dataInfo[index].name}`;
          newSpan.innerHTML = `${dollar}${dataInfo[index].money}`;
          newH2.appendChild(newStrong);
          newH2.appendChild(newSpan);
          main.appendChild(newH2);
          newH2.style.margin = "15px 0";
          index++;

          //资金翻倍
          double.addEventListener("click", function () {
            //获取美元符号后面的数字，翻倍后再合并插入文本
            newSpan.innerHTML = `${dollar}${
              newSpan.childNodes[0].nodeValue.slice(1) * 2
            }`;
          });

          //查询百万富翁
          showMillionaire.addEventListener("click", function () {
            if (newSpan.childNodes[0].nodeValue.length <= 7) {
              //资金数字长度不超过7位数的从账户列表中删除
              newSpan.parentElement.remove();
            }
          });
        }
      });

      // 财富榜(从大到小)
      sort.addEventListener("click", function () {
        let newH2 = document.querySelectorAll("#main>h2[style]");
        let newArr = [];
        newH2.forEach(function (item) {
          newArr.push(item);
        });

        // console.log(newArr);

        newArr.sort(function (a, b) {
          return (
            b.lastElementChild.innerHTML.slice(1) -
            a.lastElementChild.innerHTML.slice(1)
          );
        });

        newArr.forEach(function (item) {
          // if ((main.lastElementChild.firstChild.innerHTML = "总额：")) {
          //   main.insertBefore(item, main.lastElementChild);
          // } else {
          main.appendChild(item);
          // }
        });
      });

      //计算总额
      calculate.addEventListener("click", function () {
        let sum = 0;
        let newH2 = document.querySelectorAll("#main>h2[style]");
        let all = document.createElement("h2");
        let allText = document.createElement("strong");
        let allMoney = document.createElement("strong");
        // console.log(newH2[0].lastElementChild.innerHTML);
        newH2.forEach(function (item) {
          sum += Number(item.lastElementChild.innerHTML.slice(1));
        });

        allText.innerHTML = "总额：";
        allMoney.innerHTML = `${dollar}${sum}`;
        all.appendChild(allText);
        all.appendChild(allMoney);
        main.appendChild(all);
      });
    </script>
  </body>
</html>
